<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
<!--    内部样式-->
    <style>
        /* 选择器语法*/
        /*选择器名{
            样式名:样式值;
            样式名:样式值;
            ....
        }*/
        /*
    /*
    基本选择器
    1.id选择器
        #id属性值
        用于匹配当前页面中指定id属性值的元素
        由于id属性值不能重复，因此该方式匹配到的元素有且只有一个
        如果id属性值重复了，样式也会生效，浏览器有自动纠错功能，但是后期在js中操作的时候将不会生效
        因此，开发中不允许出现id属性值相同的元素
     2.class选择器
        .class选择器
        用于匹配当前页面中所有指定class属性的元素值
     3.标签选择器
         标签名
         用于匹配当前页面中所有指定标签的元素
     4.*选择器
        匹配一切
     选择器的优先级问题
            在使用选择器为指定元素赋予样式的时候，可能会存在多种选择器匹配到相同的元素
            id选择器>class选择器>标签选择器>*
            可以通过在样式值后面添加！important破坏优先级
            当某个样式使用了！import，则表示该样式的优先级最高
    */
#p1{
    color:green;
    font-size: 30px;
}
.c1{
    color:blue;
    font-size:12px;
}test.css
div{
    color:purple;
    font-size:32px;
}
*{
    color:pink;
    font-size:20px;
}
    </style>
<!--
外部引入有两种方式
1.通过link标签进行引入，通过href属性指定外部文件路径
2.在style标签中通过@import引入
        语法:@import "*.css文件的路径名+文件名"-->
    <style>
        @import "test.css";
    </style>
</head>
<body>
<!--
css引入方式主要有三种方式
1.行内是，在元素的标签上通过style属性引入样式
    style属性值的格式为"样式名：样式值；样式名：样式值;....
    该样式只能用于当前元素，如果需要为多个元素设置，比较麻烦
2.内部样式，可以为当前页面中符合指定规则的多种元素赋予同一组样式
    在head标签中定义一个子标签style
    在style中，通过选择器语法定义样式
3.外部引入方式
    在外部创建一个*。css文件
    在当前文档中引入这个*.css文件
  引入方式的优先级
    外部移入本质上就是把引入文件的内容在引入的位置拷贝一份
    因此，相当于写了两份一样的选择器，只是样式的值不一样。后面的将会覆盖前面的
    既：
           行内式优先级最高，内部样式与外部引入优先级一样
           内部样式与外部引入，谁在后，谁生效
-->
<p style="color: red;font-size: 20px;">这是通过行内式引入的样式</p>
<p id="p1" class="c1">这是一个段落</p>
<p class="c1">这是class属性值为c1的元素</p>
<p class="c1">这是class属性值为c1的元素</p>
<p class="c1">这是class属性值为c1的元素</p>
<div class="c1">这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
</body>
</html>